<template>
  <div class="goodsdetail">
    <div class="back" @click="back">
      <Icon type="ios-arrow-back" size="22"/>
      <span>办公用品列表</span>
    </div>
    <div class="cont">
      <div class="left">
        <img
          :src="goodsdetail.url.split(',')[0]"
          v-if="goodsdetail.url"
          alt=""
        />
        <!-- <Carousel
          loop
          autoplay
          :autoplay-speed="5000"
          class="carouselwrap"
        >
          <CarouselItem v-for="item in goodsdetail.url.split(',')" :key="item.id">
            <img :src="item" alt="" />
          </CarouselItem>
        </Carousel> -->
      </div>
      <div class="right">
        <div class="goodsname">{{ goodsdetail.goodsName }}</div>
        <div class="subtitle">
          <div style="display: flex; align-items: center">
            价格<span class="price">{{ goodsdetail.price }}</span>
          </div>
          <div>月销量: {{ goodsdetail.amount }}</div>
        </div>
        <div class="detailcont">
          <div class="type">
            <div class="gray">选择规格：</div>
            <div class="list">
              <div
                :key="item.id"
                v-for="(item, index) in guige"
                class="item"
                :class="choseGuige.id == item.id ? 'active' : ''"
                @click="choseGuige = item"
              >
                {{ item.title }}
              </div>
            </div>
          </div>
          <div class="detail">
            <div
              v-for="(item, index) in choseGuige.skuList"
              class="item"
              :key="item.id"
            >
              <span class="gray">{{ item.name }}:</span>
              <span class="value">{{ item.value }}</span>
            </div>
            <div class="item">
              <span class="gray">单价：{{ choseGuige.price }}</span>
            </div>
            <div class="item">
              <span class="gray"
                >库存：{{
                  Number(choseGuige.showCount) > choseGuige.num
                    ? choseGuige.num
                    : "库存充足"
                }}</span
              >
            </div>
            <div class="item">
              <span class="value">起领量：{{ choseGuige.beginCount }}</span>
            </div>
          </div>
        </div>
        <div class="bottom">
          <uni-number-box
            :value="parseInt(choseGuige.beginCount)"
            :min="0"
            :step="parseInt(choseGuige.beginCount)"
          ></uni-number-box>
          <div class="right0">
            <div class="keyMoney" v-if="userInfo.type != 1">
              个人余额：￥{{ accountBalance }}
              <div class="instro"></div>
            </div>
            <div class="keyMoney" v-if="userInfo.type == 1">
              部门领取额度：￥{{ accountBalance }}
              <div class="instro"></div>
            </div>
            <div class="btnwrap" @click="checkCar" v-if="showPrise">
              <div class="btn">加入篮中</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import uniNumberBox from "@/components/numbox";
import { mapState,mapMutations } from "vuex";
export default {
  data() {
    return {
      checkResult: false,
      carPrice: 0,
      showPrise: true,
      goodsdetail: {},
      choseGuige: {},
      guige: [],
    };
  },
  computed: {
    ...mapState({
      busket: (state) => state.busket,
      accountBalance: (state) => state.accountBalance, //个人余额
      departBalance: (state) => state.departBalance, //部门余额
      userInfo: (state) => state.userInfo,
    }),
  },
  mounted() {
    this.getGoodsDetail();
  },
  components: {
    uniNumberBox,
  },
  methods: {
      ...mapMutations(["updateBusket"]),
      back(){
          this.$router.push({path:"index"})
      },
    //加入购物篮
    addBusket() {
      let busket = [...this.busket];
      if (busket.length) {
        let arr = busket;
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i];
          if (item.id == this.goodsdetail.id) {
            console.log(1);
            if (item.choseGuige.id == this.choseGuige.id) {
              console.log(2);
              //加入购物车默认选中
              item.selected = true;
              item.goodsNumber = Number(this.choseGuige.beginCount);
              // let count = item.goodsNumber + this.goodsNumber;
              // item.goodsNumber =count > this.choseGuige.num ? this.choseGuige.num : count;
              busket[i] = item;
            } else {
              console.log(3);
              busket.push({
                ...this.goodsDetail,
                goodsNumber: Number(this.choseGuige.beginCount),
                choseGuige: this.choseGuige,
                selected: true,
              });
            }
            this.updateBusket(busket);
            break;
          } else {
            if (i == busket.length - 1) {
              console.log(4);
              busket.push({
                ...this.goodsDetail,
                selected: true,
                goodsNumber: Number(this.choseGuige.beginCount),
                choseGuige: this.choseGuige,
              });
              this.updateBusket(busket);
            }
          }
        }
      } else {
        console.log(5);
        this.updateBusket([
          {
            ...this.goodsDetail,
            selected: true,
            goodsNumber: Number(this.choseGuige.beginCount),
            choseGuige: this.choseGuige,
          },
        ]);
      }
      this.$emit("func");
      this.$Message.success("加入成功");
    },
    //检验加入购物车的数量是否合法
    checkCar() {
      let that = this;
      this.axios
        .request({
          url: "/api/app/v1/order/checkSingleGoods",
          params: {
            goodsId: this.$route.query.goodsId,
            storeId: this.$route.query.storeId,
            skuId: this.choseGuige.id,
            num: this.choseGuige.beginCount,
          },
          method: "get",
        })
        .then((res) => {
          if (res.success) {
            this.checkResult = true;
            that.addBusket();
          } else {
            this.$Message.error(res.message);
          }
        });
    },
    //获取商品详情
    getGoodsDetail() {
      this.axios
        .request({
          url: "/api/app/v1/goods/getGoodsDetail",
          params: {
            goodsId: this.$route.query.goodsId,
            storeId: this.$route.query.storeId,
          },
          method: "get",
        })
        .then((res) => {
          if (res.success) {
            console.log(res.result);
            this.goodsdetail = res.result;
            if (res.result.skuList) {
              this.guige = res.result.skuList;
              this.choseGuige = res.result.skuList[0];
            }
          }
        });
    },
  },
};
</script>

<style lang='less' scoped>
@import "~@/assets/css/public.less";
.goodsdetail {
  text-align: left;
  .back {
    font-size: 14px;
    color: #333333;
    cursor: pointer;
    margin-bottom: 25px;
    &:hover {
      color: #2d8cf0;
    }
    .icon {
      padding-right: 5px;
    }
  }
  .cont {
    display: flex;
    .left {
      width: 350px;
      height: 340px;
      img {
        width: 350px;
        height: 340px;
      }
    }
    .right {
      flex: 1;
      margin-left: 30px;
      .goodsname {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
      }
      .subtitle {
        font-size: 12px;
        color: #666666;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;
        margin-bottom: 15px;
        .price {
          font-size: 22px;
          color: #ff4117;
          font-weight: bold;
          padding-left: 5px;
        }
      }
      .detailcont {
        background: #f4f5f6;
        padding: 20px;
        padding-bottom: 0;
        .type {
          .list {
            display: flex;
            flex-wrap: wrap;
            padding-top: 10px;
            .item {
              padding: 3px 15px;
              border-radius: 30px;
              margin-right: 15px;
              margin-bottom: 15px;
              border: 1px solid #ccc;
              white-space: nowrap;
              cursor: pointer;
              font-size: 13px;
              &:hover {
                border: 1px solid #007cf9;
                color: #007cf9;
              }
              &.active {
                background: #007cf9;
                border: 1px solid #007cf9;
                color: #fff;
              }
            }
          }
        }
        .detail {
          display: flex;
          flex-wrap: wrap;
          .item {
            width: 50%;
            padding-bottom: 15px;
          }
        }
      }
      .bottom {
        display: flex;
        padding-top: 20px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .right0 {
          display: flex;
          align-items: center;
        }
        .keyMoney {
          display: flex;
          align-items: center;
        }
        .instro {
          margin-left: 5px;
          margin-right: 10px;
          width: 14px;
          height: 14px;
          .bg-image("~@/assets/img/说明");
        }
        .btnwrap {
          .btn {
            cursor: pointer;
            float: right;
            width: 100px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #007cf9;
            border-radius: 4px;
            border-radius: 4px;
            color: #fff;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>